<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>layui响应式管理平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="layui/css/layui.css" />
	<link rel="stylesheet" href="css/admin.css" />
	<link rel="stylesheet" type="text/css" media="screen and (max-width:992px)" href="css/admin.mobile.css">
</head>

<body>
	<!-- 布局容器 -->
	<div class="layui-layout layui-layout-admin">

		<!-- 头部 -->
		<div id="header">
			<header-component></header-component>
		</div>

		<!-- 遮罩层 -->
		<div class="masked"></div>

		<!-- 左侧菜单 -->
		<div id="leftSlide">
			<leftslide-component></leftslide-component>
		</div>

		<!-- 主体 -->
		<div class="layui-body">
			<!-- 主要内容 -->
			<div class="container">
                <!-- 搜索条件 -->
                <div class="search-res-mask"></div>
                <div class="search-res">
                    <div class="search-res-btn hide-pc">
                        <button class="layui-btn" id="search-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                    <div class="content-search search-fix">
                        <div class="layui-form layui-form-pane">
                            <div class="layui-inline">
                                <label class="layui-form-label">会员ID</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" placeholder="请输入会员ID">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">会员姓名</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" placeholder="请输入会员姓名">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" placeholder="请输入手机号码">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">时间段</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input layui-date" skin="molv" placeholder="请选择时间段" id="time" readonly>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit="">查询</button>
                                <button class="layui-btn layui-btn-primary hide-pc" id="search-close">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表格列表 -->
                <div class="table-list layui-form">
                    <table class="layui-table layui-list-table" lay-skin="line">
                        <thead>
                            <tr>
                                <th>会员ID</th>
                                <th>会员姓名</th>
                                <th>手机号码</th>
                                <th>账户余额</th>
                                <th>用户状态</th>
								<th>注册时间</th>
								<th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="layui-table-first"><i class="layui-table-hd">会员ID</i><span class="layui-table-bd">100001</span></td>
                                <td><i class="layui-table-hd">会员姓名</i><span class="layui-table-bd">张三</span></td>
                                <td><i class="layui-table-hd">手机号码</i><span class="layui-table-bd">13728936776</span></td>
                                <td><i class="layui-table-hd">账户余额</i><span class="layui-table-bd price">1000.00</span></td>
                                <td><i class="layui-table-hd">用户状态</i><span class="layui-table-bd"><input type="checkbox" name="switch" checked="" lay-skin="switch" lay-text="启用|冻结"><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>启用</em><i></i></div></span></td>
								<td><i class="layui-table-hd">注册时间</i><span class="layui-table-bd">2017-09-27 12:00:00</span></td>
								<td class="layui-table-btn">
                                    <button class="layui-btn layui-btn-normal layui-btn-small" onclick="window.location.href='账户流水.html'">账户流水</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div id="table-pages" class="tac"></div>
				
			</div>
		</div>
	</div>
	<!-- 可不引入 -->
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/fastclick.js"></script>
	<script type="text/javascript" src="js/admin.js"></script>
	<script>
		layui.use(['jquery', 'form', 'laydate', 'layer', 'laypage', 'element'], function () {
			var $ = layui.jquery,
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage,
				element = layui.element;
			$(function () {
				FastClick.attach(document.body);
			});

			// 分页
			laypage.render({
				elem: 'table-pages'
				, count: 5
				, layout: ['prev', 'page', 'next', 'count', 'skip']
				, jump: function (obj, first) {
					//obj包含了当前分页的所有参数，比如：
					console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
					console.log(obj.limit); //得到每页显示的条数

					//首次不执行
					if (!first) {
						//do something
					}
				}
			});


			// 开始时间及截止时间
			laydate.render({
				elem: '#time'
				, range: true
				, type: 'date'  // 'month'  'date' 'datetime'
				, done: function (value, date, endDate) {
					console.log(value); //得到日期生成的值，如：2017-08-18
					console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
					console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				}
				,trigger: 'click'
			});


		});
	</script>
</body>

</html>